<template>
  <div>
    <el-card>
      <div class="clearfix" slot="header">
        <my-breadcrumb>粉丝管理</my-breadcrumb>
      </div>
      <!-- tab选项 -->
      <el-tabs v-model="activeName" @tab-click="handleClick" type="card">
        <el-tab-pane label="粉丝列表" name="lsit">
          <el-row class="fans_list">
            <!-- 通过 row 和 col 组件，并通过 col 组件的 span 属性我们就可以自由地组合布局。
            span 栅格占据的列数 -->
             <el-col
             :span='3' class="fans_item"
             v-for="item in fans" :key="item.id.toString()">
              <div>
                <!-- 基本用法 el-avatar
                  通过 shape 和 size 设置头像的形状和大小。 -->
                <el-avatar :size="80"
                :src="item.photo"></el-avatar>
                <p>{{item.name}}</p>
                <el-button type="primary" plain size="small">+关注</el-button>
              </div>
             </el-col>
          </el-row>
            <!-- 分页 -->
         <!--:page-size="20" 用来设置 每页有多少条数据，它会影响页码的总数 -->
          <el-pagination
            style="margin-top:20px;"
            background
            layout="prev, pager, next"
            :page-size="20"
            @current-change="hPageChange"
            :total="total_count">
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="粉丝画像" name="portrait">
           <!-- 下面的dom用来充当echarts画图的容器
            注意： 一定要有宽，高
          -->
          <div id="main" style="width: 600px;height:400px;"></div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
const echarts = require('echarts')
export default {
  name: 'fans',
  data () {
    return {
      activeName: 'lsit', // 默认选中粉丝列表
      total_count: 0,
      fans: [], // 列表数据
      page: 1 // 页码数
    }
  },
  // 生命周期不能写在methods里面
  created () {
    this.loadFans()
  },
  methods: {
    //  渲染页面
    async loadFans () {
      try {
        const res = await this.$axios({
          method: 'GET',
          url: '/mp/v1_0/followers',
          // 参数
          params: {
            page: this.page,
            per_page: 20
          }
        })
        console.log(res)
        this.fans = res.data.data.results
        this.total_count = res.data.data.total_count
      } catch (err) {
        console.log(err)
        this.$message.error('获取粉丝列表失败')
      }
    },
    // 点击了分页
    hPageChange (curPage) {
      console.log(curPage)
      this.page = curPage
      this.loadFans()
    },
    // 点击了选项卡
    handleClick () {
      if (this.activeName === 'portrait') {
        console.log('开始画图')
        // 切换到粉丝头像tab 调用函数开始画图
        this.draw()
      }
    },
    // 处理数据
    buildData (obj) {
      console.log(obj)
      // gt: 大于 50
      // le: 小于
      // 处理获取到的数据val
      const xData = Object.keys(obj).map(item => item.replace('le', '小于').replace('gt', '大于'))
      const yData = Object.values(obj)
      return { xData, yData }
    },
    // 请求数据
    async draw () {
      // 1.基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'))
      // 2. 获取后端的数据
      const res = await this.$axios({
        method: 'GET',
        url: '/mp/v1_0/statistics/followers'
      })
      console.log(res)
      // 3. 加工一下数据，让这个数据在option中直接可用
      const { xData, yData } = this.buildData(res.data.data.age)
      // 只处理年龄信息
      // 4.指定图表的配置项和数据
      var option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: xData
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'line', // bar
          // data: [5, 20, 36, 10, 10, 20]
          data: yData
        }]
      }
      // 5.使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    }
  }
}
</script>

<style scoped lang='less'>
.fans_list {
  .fans_item {
    width: 120px;
    height: 170px;
    border: 1px dashed #ddd;
    text-align: center;
    padding-top: 10px;
    display: inline-block;
    margin-right: 30px;
    margin-bottom: 30px;
    p {
      margin: 10px 0;
    }
  }
}
</style>
